import { LitElement, html, css } from "lit";

// lit-html的一个强大特性是模板只是变量。
//你可以在任何地方创建它们，你可以定义通用模板
//被多个组件使用。

//该模板可以在一个单独的文件中定义
const sharedTemplate = html`
  <div>Shared template content</div>
`;

class SharedTemplateA extends LitElement {
    static get styles() {
        return css`
      .container {
        border: 2px solid black;
      }
    `;
    }

    render() {
        return html`
      <!-- The shared template is used by this element -->
      <div class="container">
        Element A ${sharedTemplate}
      </div>
    `;
    }
}

customElements.define("shared-template-a", SharedTemplateA);

class SharedTemplateB extends LitElement {
    static get styles() {
        return css`
      .container {
        border: 2px dotted black;
      }
    `;
    }

    render() {
        return html`
      <!-- The shared template is used by this element -->
      <div class="container">
        Element B ${sharedTemplate}
      </div>
    `;
    }
}

customElements.define("shared-template-b", SharedTemplateB);

class SharedTemplates extends LitElement {
    static get styles() {
        return css`
      shared-template-a,
      element-b {
        display: block;
        margin: 8px 0;
      }
    `;
    }

    render() {
        return html`
      <shared-template-a></shared-template-a>
      <shared-template-b></shared-template-b>
    `;
    }
}

customElements.define("shared-templates", SharedTemplates);
